<%@page pageEncoding="UTF-8" %>
<%@ include file="include/header.jsp" %>

<body>
<div id="app" v-cloak>
    <div class="toolbar2">
        <el-form :inline="true" :model="filters" label-position="top" size="small">
            <div style="justify-content: space-between;display: flex;align-items: center">
                <div style="margin-left: 16px;position: relative;">

                </div>
                <el-form-item label=" ">
                    <el-button type="primary" @click="handleAdd" class="sbtn">新增</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div style="position: absolute;left: 8px;right: 8px;">
        <el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
            <el-table-column prop="enumCd" label="编号" min-width="150"></el-table-column>
            <el-table-column prop="enumName" label="名称" min-width="150"></el-table-column>
            <el-table-column label="操作" width="250">
                <template scope="scope">
                    <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="info" size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div style="position: absolute;right: 8px;bottom: 8px;">
        <el-pagination :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
                       @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>

    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" @open="handleOpen"
               @close="handleClose" width="600px">
        <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm" :inline="false">
            <el-form-item label="编号" prop="enumCd">
                <el-input v-model.trim="editForm.enumCd" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="enumName">
                <el-input v-model.trim="editForm.enumName" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSave" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>

    <!--详情-->
    <el-dialog :title="detailTitle" :visible.sync="detailTableVisible" :close-on-click-modal="false" width="800px">
        <el-table :data="tableData_detail" border stripe v-loading="loading" :height="300" ref="table">
            <el-table-column prop="enumDetailValue" label="值" min-width="50"></el-table-column>
            <el-table-column prop="enumDetailLabel" label="名称" min-width="80"></el-table-column>
            <el-table-column prop="enumDetailIndex" label="显示顺序" min-width="50"></el-table-column>
            <el-table-column prop="dataState" label="状态" width="80">
                <template scope="scope">
                    <el-tag type="danger" size="mini" v-if="scope.row.dataState == 0">停用</el-tag>
                    <el-tag type="success" size="mini" v-if="scope.row.dataState == 1">启用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template scope="scope">
                    <el-button type="" size="mini" @click="handleEditDetail(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDeleteDetail(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleAddDetail">新增</el-button>
        </div>
    </el-dialog>

    <!-- 详情编辑 -->
    <el-dialog title="编辑" :visible.sync="detailFormVisivle" :close-on-click-modal="false" width="600px">
        <el-form :model="editDetailForm" label-width="100px" :rules="editDetailFormRules" ref="editDetailForm"
                 :inline="false">
            <el-form-item label="值" prop="enumDetailValue">
                <el-input v-model.trim="editDetailForm.enumDetailValue" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="enumDetailLabel">
                <el-input v-model.trim="editDetailForm.enumDetailLabel" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="顺序" prop="enumDetailIndex">
                <el-input-number size="mini" v-model="editDetailForm.enumDetailIndex" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="状态" prop="dataState">
                <el-radio-group v-model="editDetailForm.dataState">
                    <el-radio label="1">启用</el-radio>
                    <el-radio label="0">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSaveDetail" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script>
    $(window).resize(function () {
        app.tableH = $(window).height() - 53;
    });
    var app = new Vue({
        el: '#app',
        data: {
            tableH: $(window).height() - 53,
            loading: false,
            page: 1,
            size: 10,
            total: 0,
            filters: {
                searchStr: ''
            },
            editFormVisible: false,
            editLoading: false,
            editFormRules: {
                enumCd: [{
                    required: true,
                    message: '不能为空！'
                }],
                enumName: [{
                    required: true,
                    message: '不能为空！'
                }]
            },
            editForm: {},
            tableData: [],
            detailTitle: '',
            detailTableVisible: false,
            editDetailFormRules: {
                enumDetailValue: [{
                    required: true,
                    message: '不能为空！'
                }],
                enumDetailLabel: [{
                    required: true,
                    message: '不能为空！'
                }],
                enumDetailIndex: [{
                    required: true,
                    message: '不能为空！'
                }],
                dataState: [{
                    required: true,
                    message: '不能为空！'
                }]
            },
            editDetailForm: {},
            tableData_detail: [],
            detailFormVisivle: false,
            curr_detail_enumcd: ''
        },
        created: function () {
            this.loadData();
        },
        methods: {
            loadData: function () {
                this.loading = true;
                var data = Object.assign({}, this.filters);
                data.page = this.page;
                data.size = this.size;
                $.ajax({
                    url: "${ctx}/backstage/enum/query",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.total = returndata.data.count;
                            app.tableData = returndata.data.list;
                        } else {
                            app.total = '0';
                            app.tableData = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
            },
            handleSearch: function () {
                this.loadData();
            },
            sizeChange: function (val) {
                this.size = val;
                this.loadData();
            },
            handleCurrentChange: function (val) {
                this.page = val;
                this.loadData();
            },
            handleClose: function () {
                this.editLoading = false;
            },
            handleOpen: function () {
                if (this.$refs.editForm) {
                    this.$refs.editForm.resetFields();
                }
            },
            handleAdd: function () {
                this.editForm = {};
                this.editFormVisible = true;
            },
            handleEdit: function (index, row) {
                this.editForm = Object.assign({
                    'oldEnumCd': row.enumCd
                }, row);
                this.editFormVisible = true;
            },
            handleSave: function () {
                this.$refs['editForm'].validate(function (value) {
                    if (value) {
                        app.editLoading = true;
                        $.ajax({
                            url: "${ctx}/backstage/enum/edit",
                            data: app.editForm,
                            dataType: 'json',
                            success: function (returndata) {
                                if (returndata.success) {
                                    app.loadData();
                                    app.$message({
                                        message: '提交成功!',
                                        type: 'success'
                                    });
                                    app.editFormVisible = false;
                                } else {
                                    app.$message({
                                        message: returndata.errors.message,
                                        type: 'error'
                                    });
                                }
                                app.editLoading = false;
                            }
                        });
                    }
                }.bind(this));
            },
            handleDelete: function (index, row) {
                this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    app.editLoading = true;
                    $.ajax({
                        url: "${ctx}/backstage/enum/delete",
                        data: {
                            enumCd: row.enumCd
                        },
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.loadData();
                                app.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                });
                            } else {
                                app.$message({
                                    message: returndata.errors.message,
                                    type: 'error'
                                });
                            }
                            app.editLoading = false;
                        }
                    });
                });
            },
            loadDetail: function (enumCd) {
                $.post('${ctx}/backstage/enum/getDetail', {
                    'enumCd': enumCd
                }, function (obj) {
                    if (obj.success) {
                        this.tableData_detail = obj.data;
                    } else {
                        this.$message({
                            message: obj.errors.message,
                            type: 'error'
                        });
                    }
                }.bind(this), 'json');
            },
            handleDetail: function (index, row) {
                this.curr_detail_enumcd = row.enumCd;
                this.tableData_detail = [];
                this.loadDetail(row.enumCd);
                this.detailTitle = '明细：' + row.enumName;
                this.detailTableVisible = true;
            },
            handleDeleteDetail: function (index, row) {
                this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    app.editLoading = true;
                    $.ajax({
                        url: "${ctx}/backstage/enum/deleteDetail",
                        data: {
                            enumDetailId: row.enumDetailId
                        },
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.loadDetail(app.curr_detail_enumcd);
                                app.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                });
                            } else {
                                app.$message({
                                    message: returndata.errors.message,
                                    type: 'error'
                                });
                            }
                            app.editLoading = false;
                        }
                    });
                });
            },
            handleAddDetail: function () {
                if (this.$refs.editDetailForm) {
                    this.$refs.editDetailForm.resetFields();
                }
                this.editDetailForm = {
                    enumCd: this.curr_detail_enumcd,
                    enumDetailIndex: this.tableData_detail.length + 1,
                    dataState: '1'
                };
                this.detailFormVisivle = true;
            },
            handleEditDetail: function (index, row) {
                this.editDetailForm = Object.assign({}, row);
                this.detailFormVisivle = true;
            },
            handleSaveDetail: function () {
                this.$refs.editDetailForm.validate(function (value) {
                    if (value) {
                        app.editLoading = true;
                        $.ajax({
                            url: "${ctx}/backstage/enum/saveDetail",
                            data: app.editDetailForm,
                            dataType: 'json',
                            success: function (returndata) {
                                if (returndata.success) {
                                    app.loadDetail(app.curr_detail_enumcd);
                                    app.$message({
                                        message: '提交成功!',
                                        type: 'success'
                                    });
                                    app.detailFormVisivle = false;
                                } else {
                                    app.$message({
                                        message: returndata.errors.message,
                                        type: 'error'
                                    });
                                }
                                app.editLoading = false;
                            }
                        });
                    }
                });
            }
        }
    });
</script>